<template>
  <main class="article shadow">
    <a-table
     :columns="columns" 
    :data-source="data"
    :pagination="pagination"
    @change="handleChange"
    row-key="id"
    :loading="loading"
    >
        <template #type="{text}">
        
            <a-tag :color="useColor(text)"
            >
            <!-- {{record}}可以看到很多的数据与属性名 -->
              {{text}}
            </a-tag>
        
        </template>
<template #edit="{text:{id}}">
          <a-button class="mx-1" type="danger" @click="destroy(id)">删除文章</a-button>
          <a-button class="mx-1" type="primary" @click="update(id)">更新内容</a-button>
          <a-button class="mx-1" @click="search(id)">查看内容</a-button>
        </template>
</a-table>
<!-- 添加直接跳编辑器的地方 -->
<section class="action">
    <a-button type="primary" @click="toEditorPage">创作</a-button>
</section>
</main>
</template>
<script>
    import
    router
    from "@r/index.js";
    import http, {
        lazyRequest
    } from "@u/http";
    import {
        watchEffect,
        ref
    } from "vue";
    //按需加载组件
    import {
        Table
    } from "ant-design-vue";
    //加载数据配置
    import {
        articleViewConfig
    } from "@vp/manage/article.js";
    import {
        useColorMap
    } from "@vp/show/color.js";
    //引入useRouterParamChange路由参数id导航
    import {
        useRouteNameToPage,
        useRouteParamChange,
        useRoutePathToPage,
    } from "@u/router.js";

    //引入与
    import {
        useLinkedRouterParam
    } from "@u/route.js";
    import {
        // useInfoNotice,
        useErrorNotice,
        useSuccessNotice
    } from "@u/notice.js";
    import {
        useState
    } from "@u/hooks.js";
    export default {
        components: {
            [Table.name]: Table, //a-table也可以这样命名
        },
        setup() {
            //定义相关赋值
            const {
                columns,

                pagination
            } = articleViewConfig;
            const colorMap = new Map([
                ["blog", "#009688"],
                ["book", "#2196F3"],
            ]);
            const useColor = useColorMap(colorMap);

            //定义页码变化事件
            const pageNParamChange = useRouteParamChange("pageNum")
                // const handleChange = ({
                //     current
                // }) => console.log(current); //会打印出当前页代表的属性名current
            pagination.current = useLinkedRouterParam("pageNum");
            const handleChange = ({
                current
            }) => pageNParamChange(current);


            const toEditorPage = useRouteNameToPage("ManageEditor");
            // //返回出数据 让模板里绑定

            const data = ref([]);
            const [loading, setLoading] = useState(false)
            watchEffect(
                async() => {
                    setLoading(true);
                    try {
                        const request = http.get(
                            `/articles?limit=${pagination.pageSize}&page=${pagination.current}`
                        );

                        const [res] = await lazyRequest(request, 1000);
                        data.value = res.data.rows;
                        pagination.total = res.data.count;
                    } catch (error) {
                        useErrorNotice({
                            message: "文章列表获取失败",
                            description: error.reason || "未知错误",
                        });
                    } finally {
                        setLoading(false);
                    }
                }, {
                    flush: "post", //将watcheffrct改为渲染后
                }
            );
            const destroy = async(id) => {
                console.log(id);
                try {
                    await http.delete(`/articles/${id}`);
                    //删除后 重新拉取数据库的数据 相当于更新当前页面
                    const request = http.get(
                        `/articles?limit=${pagination.pageSize}&page=${pagination.current}`
                    );

                    const [res] = await lazyRequest(request, 1000);
                    data.value = res.data.rows;
                    pagination.total = res.data.count;
                    useSuccessNotice({
                        message: "删除成功",
                    });
                } catch (error) {
                    useErrorNotice({
                        message: "删除失败",
                        description: error.reason || "未知错误",
                    })
                } finally {
                    setLoading(false);
                }
            }
            const search = (id) => {
                const toPage = useRoutePathToPage(`/details/${id}`);
                toPage();
            };
            //定义点击更新事件
            const update = (id) => {
                router.push({
                    name: "ManageEditor",
                    query: {
                        id
                    }
                })
            }
            return {
                data,
                columns,
                useColor,
                pagination,
                handleChange,
                toEditorPage,
                loading,
                destroy,
                search,
                update
            };
        },
    };
</script>
<style scoped>
    .article {
        margin: 20px;
        padding: 10px;
        border-radius: 8px;
    }
    
    .action {
        text-align: center;
    }
</style>